<template>
    <div>
        <el-breadcrumb
            separator-class="el-icon-arrow-right"
            class="breadcrumb-base"
            style="line-height: 30px"
        >
            <el-breadcrumb-item>
                <i class=" el-icon-medal"></i>
                <span>经典案例</span>
            </el-breadcrumb-item>
        </el-breadcrumb>

        <div class="main-container">
            <div class="filter-box">
                <div class="filter-item">
                    <span>标本类别:</span>
                    <el-select
                        v-model="specimenValue"
                        placeholder="请选择"
                        size="mini"
                    >
                        <el-option
                            v-for="item in filterElement.specimen"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
                <div class="filter-item">
                    <span>诊断时间:</span>
                    <el-date-picker
                        v-model="diagnosisTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        size="mini"
                    >
                    </el-date-picker>
                </div>
                <div class="filter-item">
                    <span>医生:</span>
                    <el-select
                        v-model="doctorsValue"
                        placeholder="请选择"
                        size="mini"
                    >
                        <el-option
                            v-for="item in filterElement.doctors"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
                <el-button
                    type="primary"
                    size="mini"
                    @click="search"
                >搜索</el-button>
            </div>
            <div style="width: 100%">
                <el-table
                    height="570"
                    :data="tableData"
                    :border="true"
                    :cell-style="{ 'text-align': 'center' }"
                    :header-cell-style="{
                        'background-color': '#E6E9EF',
                        color: '#777C7C',
                        'font-weight': '400',
                        'font-size': '15px',
                        'border-right': '1px solid #ffffff',
                        'text-align': 'center',
                    }"
                    size="mini"
                    style="width: 100%; margin-top: 20px"
                    stripe
                >
                    <el-table-column
                        prop="name"
                        label="姓名"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="sex"
                        label="性别"
                    ></el-table-column>
                    <el-table-column
                        prop="age"
                        label="年龄"
                    ></el-table-column>
                    <el-table-column
                        prop="ward"
                        label="病区"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="bedId"
                        label="床号"
                    >
                    </el-table-column>

                    <el-table-column
                        prop="PathologicalDiagnosis"
                        label="病理诊断"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="diagnosisDoctor"
                        label="诊断医生"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="collectdoctor"
                        label="收藏医生"
                    >
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                @click="toView(scope.row)"
                                type="text"
                                size="small"
                            >查看详情
                            </el-button>
                            <el-button
                                @click="removeCase(scope.row)"
                                type="text"
                                size="small"
                            >移除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row
                    style="margin-top: 10px"
                    align="right"
                >
                    <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :current-page="pageInfo.page"
                        :page-size="pageInfo.size"
                        :page-sizes="pagination_page_sizes"
                        :total="pageInfo.total"
                        style="text-align: center; margin-top: 12px"
                        layout="sizes, prev, pager, next, total"
                    >
                    </el-pagination>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui';
import { itemsPerPage } from '@/client/libs/util';
import { PAGINATION_PAGE_SIZES } from '@/client/consts/constant';

export default {
    name: 'caseLibrary',
    data() {
        return {
            pagination_page_sizes: PAGINATION_PAGE_SIZES,
            filterElement: {
                specimen: [],
                doctors: [],
            },
            specimenValue: '',
            diagnosisTime: '',
            doctorsValue: '',
            tableData: [],
            pageInfo: {
                page: 0,
                size: itemsPerPage.get(),
                total: 15,
            },
        };
    },
    mounted() {
        this.specimenList();
        this.doctorList();
        this.tableDataList(null, null, 0, this.pageInfo.size, null, null);
    },
    methods: {
        handleSizeChange(val) {
            itemsPerPage.set(val);
            console.log(`每页 ${val} 条`);
            this.pageInfo.size = val;
            this.tableDataList(
                this.diagnosisTime[0],
                this.diagnosisTime[1],
                this.pageInfo.page,
                this.pageInfo.size,
                this.specimenValue,
                this.doctorsValue
            );
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageInfo.page = val;
            this.tableDataList(
                this.diagnosisTime[0],
                this.diagnosisTime[1],
                this.pageInfo.page,
                this.pageInfo.size,
                this.specimenValue,
                this.doctorsValue
            );
        },
        toView(row) {
            this.$store.commit('setPropertyGeneral', {
                key: 'diagnosis',
                value: {
                    id: row.id,
                    pathologyId: row.pathologyId,
                },
            });
            this.$router.push('/diagnosis/detail');
        },
        //查找
        search() {
            this.tableDataList(
                this.diagnosisTime[0],
                this.diagnosisTime[1],
                this.pageInfo.page,
                this.pageInfo.size,
                this.specimenValue,
                this.doctorsValue
            );
        },
        //请求医生列表
        doctorList() {
            try {
                this.$axios({
                    method: 'GET',
                    url: `/PROXY-Remote/institutions/statistics`,
                }).then((d) => {
                    let resultUserInfo = d.data.data.userInfo;
                    resultUserInfo.forEach((t, index) => {
                        if (t.id === 1) {
                            resultUserInfo.splice(index, 1);
                            console.log('resultUserInfo', resultUserInfo);
                        }
                    });
                    this.filterElement.doctors = resultUserInfo;
                });
            } catch (e) {
                throw new Error(e);
            }
        },
        //请求标本类别列表
        specimenList() {
            this.$axios({
                method: 'GET',
                url: '/PROXY-Remote/dicts/list',
                params: {
                    code: 'specimenCategory',
                    page: 0,
                    size: 99,
                },
            }).then((res) => {
                this.filterElement.specimen = res.data.data;
                console.log(
                    'this.filterElement.specimen',
                    this.filterElement.specimen
                );
            });
        },
        //请求典型案例库tabledata数据列表
        tableDataList(startTime, endTime, page, size, specimenType, userId) {
            try {
                this.$axios({
                    method: 'DELETE',
                    url: `/PROXY-Remote/typicalLibrary/page`,
                    params: {
                        startTime: startTime,
                        endTime: endTime,
                        page: page,
                        size: size,
                        specimenType: specimenType,
                        userId: userId,
                    },
                }).then((res) => {
                    if (res.data.code === 200) {
                        this.pageInfo = res.data.pageInfo;
                        let shuju = [];
                        console.log(res.data.data);
                        res.data.data.forEach((item) => {
                            item.diagnosis.typicalLibraryId = item.id;
                            shuju.push(item.diagnosis);
                        });
                        this.tableData = shuju;
                    }
                });
            } catch (e) {
                throw new Error(e);
            }
        },
        //移出典型案列库
        removeCase(row) {
            this.$confirm('是否确认移除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                try {
                    this.$axios({
                        method: 'DELETE',
                        url: `/PROXY-Remote/typicalLibrary/${row.typicalLibraryId}`,
                    }).then((res) => {
                        if (res.data.code === 200) {
                            this.$message.success('移除案列成功');
                            this.tableData.forEach((t, index) => {
                                if (t.id === row.id) {
                                    this.tableData.splice(index, 1);
                                }
                            });
                        }
                    });
                } catch (e) {
                    throw new Error(e);
                }
            });
        },
    },
};
</script>

<style scoped>
.el-table th.gutter {
    display: table-cell !important;
}

.filter-box {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.filter-item {
    display: flex;
    align-items: center;
}
</style>
